<!-- 库存查询/任意时段查询 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </el-button-group>
    <el-form inline :model="dataForm" label-width="100px" @keyup.enter.native="searchHandle">
      <el-form-item label="查询角度">
        <el-radio-group v-model="dataForm.queryPoint" @change="getDataList">
          <el-radio label="1">商品</el-radio>
          <el-radio label="2">品种</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="品种零售价">
        <el-radio-group v-model="dataForm.groupFlag" @change="getDataList">
          <el-radio label="1">分组</el-radio>
          <el-radio label="2">不分组</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="筛选库存信息">
        <el-select v-model="dataForm.quantityCheck" size="mini">
          <el-option v-for="item in quantityCheckOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品编码">
        <el-input v-model="dataForm.goodsCode"></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="dataForm.goodsName"></el-input>
      </el-form-item>
      <el-form-item label="商品条码">
        <el-input v-model="dataForm.goodsBarcode"></el-input>
      </el-form-item>
      <el-form-item label="商品类别">
        <el-select v-model="dataForm.ctgId" @change="ctgIdChange" clearable>
          <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="制造商">
        <el-input v-model="dataForm.supplyName">
          <el-button slot="append" @click="chooseSupply">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="品种">
        <el-input v-model="dataForm.brandName">
          <el-button slot="append" @click="getBrandList">选择</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="球镜范围" v-if="dataForm.ctgId == '8'">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="厂家型号" v-if="dataForm.ctgId == '1' || dataForm.ctgId == '6' || dataForm.ctgId == '8'">
        <el-input v-model="dataForm.manufacturerSpec"></el-input>
      </el-form-item>
      <el-form-item label="厂家色号" v-if="dataForm.ctgId == '1' || dataForm.ctgId == '6' || dataForm.ctgId == '8'">
        <el-input v-model="dataForm.manufacturerColorNumber"></el-input>
      </el-form-item>
      <el-form-item label="尺寸" v-if="dataForm.ctgId != '8'">
        <el-input v-model="dataForm.goodsSize"></el-input>
      </el-form-item>
      <el-form-item label="工艺类型" v-if="dataForm.ctgId == '1'">
        <el-select v-model="dataForm.craftType" clearable>
          <el-option v-for="item in craftTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="镜架材质">
        <el-select v-model="dataForm.frameMaterial" clearable>
          <el-option v-for="item in frameMaterialData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采购年份">
        <el-input v-model="dataForm.purchaseDate" placeholder="年份后两位+两位月份"></el-input>
      </el-form-item>
      <el-form-item label="配件类型" v-if="dataForm.ctgId == '2'">
        <el-select v-model="dataForm.accessoriesType" clearable>
          <el-option v-for="item in bizData.accessoryTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材料分类" v-if="dataForm.ctgId == '3'">
        <el-select v-model="dataForm.lensMaterial" clearable>
          <el-option v-for="item in bizData.lensMaterial" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="折射率" v-if="dataForm.ctgId == '3'">
        <el-select v-model="dataForm.refractiveIndex" clearable>
          <el-option v-for="item in bizData.refractivityData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="镜片分类" v-if="dataForm.ctgId == '3'">
        <el-select v-model="dataForm.photometricClassification" clearable>
          <el-option v-for="item in bizData.photometricClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用类型" v-if="dataForm.ctgId == '4'">
        <el-select v-model="dataForm.useType" clearable>
          <el-option v-for="item in bizData.useType" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="抛弃类型" v-if="dataForm.ctgId == '4'">
        <el-select v-model="dataForm.disusedClassification" clearable>
          <el-option v-for="item in bizData.disusedClassification" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="球镜范围" v-if="dataForm.ctgId == '3' || dataForm.ctgId == '4'">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.mirrorBallMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="柱镜范围" v-if="dataForm.ctgId == '3' || dataForm.ctgId == '4'">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.columnMirrorMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.columnMirrorMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="定做状态" v-if="dataForm.ctgId == '3' || dataForm.ctgId == '4'">
        <el-select v-model="dataForm.customizeType" clearable>
          <el-option v-for="item in bizData.customizeTypeData" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仓位">
        <el-select v-model="dataForm.stockIds" multiple collapse-tags @change="changeSelect" style="margin-right: 20px;width: 249px"
          v-if="this.radio != '2'">
          <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
          <el-option v-for="item in stockOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
        </el-select>
        <el-radio-group v-model="radio" @change="changeStock">
          <el-radio :label="'2'">不分仓</el-radio>
          <el-radio :label="'1'">启用仓</el-radio>
          <el-radio :label="'0'">停用仓</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="商品状态">
        <el-select v-model="dataForm.status" size="mini" clearable>
          <el-option v-for="item in statusOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="库存时间">
        <el-row>
          <el-col :span="11">
            <el-date-picker v-model="dataForm.createTimeStart" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker v-model="dataForm.createTimeEnd" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="标准零售价格">
        <el-row class="row-range">
          <el-col :span="11">
            <el-input v-model="dataForm.goodsPriceMin"></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-input v-model="dataForm.goodsPriceMax"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div class="avue-crud" style="margin-top: 5px;">
      <el-table :data="dataList" ref="table" border v-loading="dataListLoading" :max-height="tableHeight">
        <el-table-column key="1" label="商品编码" min-width="140" fixed="left" v-if="dataForm.queryPoint == '1'">
          <template slot-scope="scope">
            <el-button type="text" @click="getDetailByCheck(scope.row)">{{scope.row.goodsCode}}</el-button>
          </template>
        </el-table-column>
        <el-table-column key="2" prop="goodsName" label="商品名称" min-width="180" fixed="left" v-if="dataForm.queryPoint == '1'"></el-table-column>
        <el-table-column key="3" label="品种编码" min-width="90" fixed="left" v-if="dataForm.queryPoint == '2'">
          <template slot-scope="scope">
            <el-button type="text" @click="checkGoodsByBrand(scope.row)">{{scope.row.goodsCode}}</el-button>
          </template>
        </el-table-column>

        <el-table-column key="4" prop="brandName" label="品种名称" min-width="180" fixed="left" v-if="dataForm.queryPoint == '2'"></el-table-column>

        <el-table-column key="5" prop="ctgName" label="商品类别" width="80"></el-table-column>
        <el-table-column key="6" prop="supplyName" label="制造商" width="130"></el-table-column>
        <el-table-column key="7" prop="goodsPrice" label="标准零售价" width="100" v-if="dataForm.queryPoint != '2' || dataForm.groupFlag != '2'"></el-table-column>
        <el-table-column key="8" prop="goodsQuantity" label="数量" width="70"></el-table-column>
        <el-table-column key="9" prop="stockName" label="仓位" min-width="160"></el-table-column>
        <el-table-column key="10" prop="batch" label="批次" min-width="140"></el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination" style="margin-bottom: 25px;margin-top: 0;">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100, 200]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <goods-info v-if="infoVisible" ref="info"></goods-info>
    <supply-search v-if="supplyVisible" ref="supplySearch" @refreshData="updateSearchForm"></supply-search>
    <select-brand v-if="selectBrandVisible" ref="selectBrand" @refreshData="updateFormBrand"></select-brand>
    <check-goods v-if="goodsVisible" ref="goodsDialog"></check-goods>
  </div>
</template>

<script>
  import { filterParams } from '@/util/tools'
  import { remote } from '@/api/admin/dict'
  import { getGoodsQuantityByTime } from '@/api/eims/storage'

  import { getCtgList } from '@/api/eims/ctg'
  import { getStockList } from '@/api/eims/stock'
  import GoodsInfo from '../goodsInfo/detail'
  import SelectBrand from './SearchBrand'
  import SupplySearch from './supply-search'
  import CheckGoods from './CheckGoodsByBrand'

  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        checked: false,
        infoVisible: false,
        goodsVisible: false,
        frameMaterialData: [],
        craftTypeData: [],
        dataForm: {
          queryPoint: '1',
          groupFlag: '2',
          quantityCheck: 1,
          brandName: '',
          supplyName: '',
          stockIds: []
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        ctgOptions: [],
        stockOptions: [],
        oldStockIds: [],
        quantityCheckOptions: [{
            label: '显示库存所有的商品',
            value: 0
          },
          {
            label: '忽略库存为0的商品',
            value: 1
          },
          {
            label: '显示库存=0的商品',
            value: 2
          },
          {
            label: '显示库存>0的商品',
            value: 3
          },
          {
            label: '显示库存<0的商品',
            value: 4
          }
        ],
        statusOptions: [{
            label: '启用',
            value: '1'
          },
          {
            label: '停用',
            value: '0'
          }
        ],
        dataListLoading: false,
        addOrUpdateVisible: false,
        radio: '1',
        supplyVisible: false,
        selectBrandVisible: false,
      }
    },
    components: {
      GoodsInfo,
      SupplySearch,
      SelectBrand,
      CheckGoods
    },
    created() {

    },
    computed: {
      ...mapGetters(['permissions', 'bizData']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        remote('frame_material').then(response => {
          this.frameMaterialData = response.data.data
        })
        remote('craft_type').then(response => {
          this.craftTypeData = response.data.data
        })
        this.getCtgOptions()
        this.getStockOptions()
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空查询查询表单
      searchReset() {
        for (let key in this.dataForm) {
          if (key == 'quantityCheck') {
            this.dataForm[key] = 1
          } else if (key == 'queryPoint') {
            this.dataForm[key] = '1'
          } else if (key == 'groupFlag') {
            this.dataForm[key] = '2'
          } else {
            this.dataForm[key] = ''
          }
        }
      },
      // 获取数据列表
      getDataList() {
        // this.dataForm.quantityCheck = 1;
        if (this.dataForm.stockIds.indexOf(0) > -1) {
          var index2 = this.dataForm.stockIds.indexOf(0);
          this.dataForm.stockIds.splice(index2, 1)
        }
        if (this.dataForm.ctgId == '3' || this.dataForm.ctgId == '4') {
          this.dataForm.customizeType = this.dataForm.customizeType
        }
        let params1 = {
          current: this.pageIndex,
          size: this.pageSize
        }
        let params2 = filterParams(this.dataForm)
        this.dataListLoading = true
        getGoodsQuantityByTime(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
        this.$nextTick(() => {
          this.$refs.table.bodyWrapper.scrollTop = 0;
        })
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
        this.$nextTick(() => {
          this.$refs.table.bodyWrapper.scrollTop = 0;
        })
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      //  获取商品类别列表
      getCtgOptions() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //商品类别改变事件
      ctgIdChange() {
        this.supplyId = ''
        this.dataForm.supplyId = ''
        this.dataForm.supplyName = ''
        this.dataForm.brandId = ''
        this.dataForm.brandName = ''
      },
      //获取制造商列表
      chooseSupply() {
        this.supplyVisible = true
        this.$nextTick(() => {
          if (this.dataForm.ctgId) {
            this.$refs.supplySearch.init(this.dataForm.ctgId)
          } else {
            this.$refs.supplySearch.init()
          }

        })
      },
      updateSearchForm(data) {
        this.dataForm.supplyId = data.id
        this.dataForm.supplyName = data.name
        this.dataForm.brandId = ''
        this.dataForm.brandName = ''
        this.dataForm.brandCode = ''
      },
      // 获取商品品种信息
      getBrandList() {
        if (!this.dataForm.ctgId) {
          this.$message.warning('请选择商品类别')
          return false
        }
        if (!this.dataForm.supplyId) {
          this.$message.warning('请选择制造商')
          return false
        }
        let data = {
          ctgId: this.dataForm.ctgId,
          supplyId: this.dataForm.supplyId
        }
        this.selectBrandVisible = true
        this.$nextTick(() => {
          this.$refs.selectBrand.init(data)
        })
      },
      //  更新表单品种信息
      updateFormBrand(data) {
        this.dataForm.brandId = data.id
        this.dataForm.brandName = data.name
        this.dataForm.brandCode = data.code
      },
      //  获取仓位列表
      getStockOptions() {
        let data = {
          status: this.radio
        }
        getStockList(data).then(response => {
          if(response.data.code == '0'){
            this.stockOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //仓位状态选择
      changeStock() {
        this.dataForm.stockIds = []
        this.getStockOptions()
      },
      //根据code获取商品详细信息
      getDetailByCheck(info) {
        let time = {
          createTimeStart: this.dataForm.createTimeStart,
          createTimeEnd: this.dataForm.createTimeEnd,
        }
        this.infoVisible = true
        this.$nextTick(() => {
          this.$refs.info.init(info, '商品信息', time, this.dataForm.stockIds)
        })
      },
      // 查询品种商品
      checkGoodsByBrand(row) {
        let time = {
          createTimeStart: this.dataForm.createTimeStart,
          createTimeEnd: this.dataForm.createTimeEnd
        }
        this.goodsVisible = true
        this.$nextTick(() => {
          this.$refs.goodsDialog.init(row, time, this.dataForm.stockIds)
        })
      },
      selectAll() {
        this.dataForm.stockIds = []
        if (this.checked) {
          this.stockOptions.map((item) => {
            this.dataForm.stockIds.push(item.id)
          })
        } else {
          this.dataForm.stockIds = []
        }
      },
      changeSelect(val) {
        if (val.length === this.stockOptions.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
    }
  }
</script>
<style>
  .el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 20px;
  }
</style>
